<template>
  <el-container style="width: 100%; height: 100vh">
    <el-header class="header" style="height: 60px">
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        style="display: flex"
      >
        <!-- 头部左边的消息气泡 -->
        <el-col :span="2">
          <el-popover
            placement="top-start"
            title="薪资计算"
            :width="300"
            :height="200"
            trigger="hover"
            :content="formattedContent"
          >
            <template #reference>
              <el-button class="m-2">薪资计算</el-button>
            </template>
          </el-popover>
        </el-col>

        <!-- 头部中间的搜索框 -->

        <el-col :span="14">
          <div class="flex gap-4" style="display: flex">
            <el-date-picker
              style="width: 200px; margin-right: 20px"
              v-model="searchData.date"
              type="month"
              placeholder="选择日期"
              :size="size"
              @change="updateStartDate"
            >
              <template #suffix>
                <el-icon class="el-input__icon"><calendar /></el-icon>
              </template>
            </el-date-picker>
            <el-input
              v-model="searchData.name"
              style="width: 300px"
              placeholder="Type something"
              size="large"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </div>
        </el-col>

        <!-- 一键打卡 头部右边的报表分析提示 -->
        <el-col
          :span="3"
          class="text-right"
          style="display: flex; margin-right: 50px"
        >
          <el-button @click="clickTap">一键发放</el-button>
          <el-button @click="checkSalary">报表分析</el-button>
        </el-col>
      </el-row>
    </el-header>

    
    <el-carousel
      ref="carouselRef"
      style="width: 99%"
      :autoplay="false"
      :indicator-position="none" 
      @change="handleCarouselChange"
      :show-indicators="false" 
    >
      <!-- 走马灯1 -->
      <el-carousel-item style="width: 100%">
        <div class="carousel-content">
          <el-row  show-header="true">
            <el-table
              :data="salaryEmployees.WagesCurrent"
              width="100%"
              style="width: 100%"
              size="small"
            >
              <el-table-column
                fixed
                prop="eid"
                label="编号"
                align="center"
                width="70"
              />
              <el-table-column prop="name" label="姓名" align="center" />
              <el-table-column prop="department" label="部门" align="center" />
              <el-table-column prop="position" label="职位" align="center" />
              <el-table-column
                prop="wData"
                label="日期"
                width="80"
                align="center"
              />
              <el-table-column label="打卡情况" align="center">
                <template #header>
                  <span>打卡情况</span>
                </template>
                <el-table-column
                  prop="work"
                  label="加班"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="attend"
                  label="考勤"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="absent"
                  label="缺勤"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="leave"
                  label="请假"
                  align="center"
                  width="55px"
                />
              </el-table-column>
              <el-table-column label="培训情况" align="center">
                <template #header>
                  <span>培训情况</span>
                </template>
                <el-table-column
                  prop="great"
                  label="优秀"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="good"
                  label="良好"
                  align="center"
                  width="55px"
                />
              </el-table-column>
              <el-table-column label="薪资" align="center">
                <template #header>
                  <span>培训情况</span>
                </template>
                <el-table-column
                  prop="baseWage"
                  label="底薪"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="addWage"
                  label="提成"
                  align="center"
                  width="55px"
                />
                <el-table-column
                  prop="sumWage"
                  label="总工资"
                  align="center"
                  width="80px"
                />
              </el-table-column>

              <el-table-column prop="wstatus" label="状态" align="center">
                <template #default="scope">
                  <el-tag
                    :type="scope.row.wstatus === 0 ? 'danger' : 'success'"
                  >
                    {{ scope.row.wstatus === 0 ? '未发放' : '发放' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-carousel-item>

      <!-- 走马灯2 -->
      <el-carousel-item>
        <div class="saync">
          <div class="row">
            <salary-sum>
              <pic-one></pic-one>
            </salary-sum>
            <salary-sum>
              <pic-two></pic-two>
            </salary-sum>
          </div>
        </div>
      </el-carousel-item>

      <!-- 走吗灯3 -->
      <el-carousel-item>
        <div class="row">
          <salary-sum>
            <pic-three></pic-three>
          </salary-sum>
          <salary-sum>
            <pic-four></pic-four>
          </salary-sum>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 分页条 -->
    <el-footer  v-if="activeIndex === 0">
      <pagi-nation
        :total="salaryAll.length"
        :allData="salaryAll"
        @update:Data="updateSalary"
      ></pagi-nation>
    </el-footer>
  </el-container>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick, watchEffect, provide,watch } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import SalarySum from './components/SalarySum.vue'
import PicOne from './components/PicOne.vue'
import PicTwo from './components/PicTwo.vue'
import PicThree from './components/PicThree.vue'
import PicFour from './components/PicFour.vue'
import dayjs from 'dayjs'
import {
  wagesCurrent,
  wagesAdd,
  wageslike,
  wagesfutureLike
} from '../../api/salary'



// 薪资计算
const originalContent = ref(
  '部门职位+部门职位x津贴比例(0.05)+加班次数x100+考勤次数x30-缺勤次数x50-请假次数x30+培训优秀x100+培训良好x50'
)
const formattedContent = ref('')

onMounted(async () => {
  formattedContent.value = originalContent.value.replace(/([+-])/g, '\n$1')
  salaryEmployees.WagesCurrent = salaryAll.value.slice(0, 5)

  //申请数据
  // await getWagesCurrent()
  //
})

// 获取数据
const getWagesCurrent = async () => {
  const res = await wagesCurrent()

  // console.log(res, 'res')
  Object.assign(salaryEmployees.WagesCurrent, res.data.WagesCurrent) //整体赋值
  salaryEmployees.WagesCurrent.forEach((employee) => {
    // employee.wData = searchData.day ? searchData.day : dayjs().format('YYYY-MM')

    employee.wData = searchData.date
    employee.addWage =
      employee.baseWage * 0.05 +
      employee.work * 100 +
      employee.attend * 30 -
      employee.absent * 50 -
      employee.leave * 30 +
      employee.great * 100 +
      employee.good * 50
    employee.sumWage = employee.addWage + employee.baseWage
  })
  salaryEmployees.total = res.data.total

  Object.assign(salaryAll.value, salaryEmployees.WagesCurrent) //整体赋值
}

//搜索框数据
const searchData = reactive({
  date: dayjs().format('YYYY-MM'),
  name: ''
})
//日期格式化
const updateStartDate = (value) => {
  if (value) {
    searchData.date = dayjs(value).format('YYYY-MM')
    console.log(searchData.date)
  }
}

// 查询封装
const checkData = async () => {
  const res = await wageslike(searchData)
  salaryEmployees.WagesCurrent = []
  Object.assign(salaryEmployees.WagesCurrent, res.data.WagesCurrent) //整体赋值
  salaryEmployees.WagesCurrent.forEach((employee) => {
    employee.wData = searchData.date
    employee.addWage =
      employee.baseWage * 0.05 +
      employee.work * 100 +
      employee.attend * 30 -
      employee.absent * 50 -
      employee.leave * 30 +
      employee.great * 100 +
      employee.good * 50
    employee.sumWage = employee.addWage + employee.baseWage
  })
  salaryEmployees.total = res.data.total
  Object.assign(salaryAll.value, salaryEmployees.WagesCurrent) //整体赋值
}
// 查询
watchEffect(async () => {
//  查询当月
  if (searchData.date === dayjs().format('YYYY-MM')) {
    const res = await wageslike(searchData)

    if (!res.data.total) {
      ElMessage.warning('当月还未提交记录 || 查无数据')
      await getWagesCurrent()
    }
    salaryEmployees.WagesCurrent = salaryAll.value.slice(0, 5)
  }

//  日期 或者 名字 模糊查询
  if (searchData.date || searchData.name) {
    await checkData()
    console.log(salaryEmployees.WagesCurrent.length,'111leng');
    salaryAll.value = salaryEmployees.WagesCurrent
    salaryEmployees.WagesCurrent = salaryAll.value.slice(0, 5)
  }
  
//查询未来数据
  if (searchData.date > dayjs().format('YYYY-MM')) {
    const res = await wagesfutureLike(searchData)
    salaryEmployees.WagesCurrent = []
    Object.assign(salaryEmployees.WagesCurrent, res.data.WagesCurrent) //整体赋值
    salaryEmployees.WagesCurrent.forEach((employee) => {
      employee.wData = searchData.date
    })
    salaryEmployees.total = res.data.total
    Object.assign(salaryAll.value, salaryEmployees.WagesCurrent) //整体赋值
  }
})

// 列表数据
// const pagedEmployees = ref([])
// 接收子组件传递回来的分页数据
const updateSalary = (newEmployees) => {
  salaryEmployees.WagesCurrent = newEmployees.value
  // console.log(newEmployees, 'newEmployees')
}

// 查看报表
const carouselRef = ref(null)
const checkSalary = () => {
  nextTick(() => {
    if (carouselRef.value) {
      carouselRef.value.setActiveItem(1)
    }
  })
}

// 一键打卡
// 发送的数据
// const employeeWagesAdd = reactive([])

const clickTap = async () => {
  nextTick(() => {
    if (carouselRef.value) {
      carouselRef.value.setActiveItem(0)
    }
  })
  await nextTick()
  // 检查是否所有员工都已经发放
  const allDistributed = salaryEmployees.WagesCurrent.every(
    (employee) => employee.wstatus === 1
  )
  if (allDistributed) {
    ElMessage.warning('请勿重复发放')
    return
  }

  if (searchData.date === dayjs().format('YYYY-MM')) {
    // 参数
    const res = await wagesCurrent()
    // 过滤出未发放的条数
    const filteredWages = salaryEmployees.WagesCurrent.filter(
      (item) => item.wstatus === 0
    )
    //赋值
    const employeeWagesAdd = salaryEmployees.WagesCurrent.length
      ? filteredWages
      : res.data.WagesCurrent

    const wData = dayjs(searchData.date).format('YYYY-MM')
    // 更新员工状态和工资
    employeeWagesAdd.forEach((employee) => {
      employee.wstatus = 1 // 设置工资状态为已发放
      employee.status = 1 // 设置状态为已发放
      employee.date = wData
      employee.addWage =
        employee.baseWage * 0.05 +
        employee.work * 100 +
        employee.attend * 30 -
        employee.absent * 50 -
        employee.leave * 30 +
        employee.great * 100 +
        employee.good * 50
      employee.sumWage = employee.addWage + employee.baseWage
    })
    const addRes = await wagesAdd(employeeWagesAdd)
    if (addRes.code === 200) {
      ElMessage.success('发放成功')
      // 更新表格中的数据
      salaryEmployees.WagesCurrent.forEach((employee) => {
        employee.wstatus = 1
        employee.status = 1
      })
      Object.assign(salaryAll.value, salaryEmployees.WagesCurrent) //整体赋值
    }
  } else {
    ElMessage.warning('未处于当前月份,不可发放')
  }
}

//表格绑定数据--表格绑定数据
const salaryEmployees = reactive({
  WagesCurrent: [],
  total: 0
})
// 全部显示 -- 传给分页
const salaryAll = ref([])

// 提供 searchData 给所有子孙组件
provide('searchData', searchData)

// 处理分页条显示
const  activeIndex= ref(0)

const handleCarouselChange = (index)=>{
  activeIndex.value = index
  console.log( activeIndex.value,'index');
  if(index != 0){
    searchData.name = ''
  }
  
}
</script>

<style lang="less" scoped>
.saync {
  display: flex;
  height: 100%;
  // flex-wrap: wrap;
}
.row {
  display: flex;
  width: 100%; /* 每个 row 占满容器宽度 */
  height: 100%;
}
.row > div {
  flex: 1; /* 子元素平分空间 */
}
.row {
  .item{
    width: 50%;
  }
}

/* 为所有的 .el-carousel__item 设置默认样式 */
.el-carousel__item {
  overflow-y: hidden; /* 默认不显示滚动条 */
}

/* 为第一个 .el-carousel__item 设置滚动样式 */
.el-carousel__item:first-child {
  overflow-y: auto; /* 允许内容滑动 */
}



.el-carousel__indicators--horizontal { 
  display: none;
}

/deep/ .el-carousel__indicators { // 指示灯位置
  left: unset;
  transform: unset;
  right: 2%;
  margin-top: 300px;
  display: none;
}

</style>
